@import "@wordpress/base-styles/mixins";
@import "@wordpress/base-styles/variables";

.a4a-confirmation-dialog {
	&__heading {
		padding-bottom: 16px;
		@include heading-large;
	}

	& .dialog__content {
		h1.a4a-confirmation-dialog__heading {
			@include heading-x-large;
		}
		p, div {
			@include body-large;
		}
	}

	& .dialog__action-buttons {
		display: flex;
		flex-direction: row;
		gap: 8px;
		justify-content: flex-end;

		// Something is overriding the opacity of a disabled button, so we need to override it back here
		// Feel free to remove the .is-destructive class if you want to apply this to all buttons,
		// or to remove the styles entirely if the root issue was fixed
		button.components-button.is-destructive:disabled {
			opacity: 0.3;
		}
	}
}
